<template>
  <div>
    <mu-dialog
      title="出租车经过地查询"
      width="600"
      max-width="80%"
      :esc-press-close="false"
      :overlay-close="false"
      :open.sync="openAlert"
      scrollable
    >
      <div>
        <p>
          中心经度：<strong>{{ jd }}</strong>
        </p>
        <p>
          中心纬度：<strong>{{ wd }}</strong>
        </p>
        <p>
          范围：<strong>{{ fw }}</strong> 米
        </p>
        <li color="black"><strong>请选择时间</strong></li>
        <mu-date-input
          icon="today"
          v-model="date"
          label="选择日期"
          format="YYYY 年 MM 月 DD 日"
          label-float
          full-width
        ></mu-date-input>
        <mu-date-input
          icon="today"
          landscape
          v-model="time1"
          label="选择开始时间"
          type="time"
          label-float
          full-width
        ></mu-date-input>
        <mu-date-input
          icon="today"
          landscape
          v-model="time2"
          label="选择结束时间"
          type="time"
          label-float
          full-width
        ></mu-date-input>

        <div style="text-align:center">
          <mu-button color="primary">查询信息</mu-button>
        </div>
      </div>
      <mu-button slot="actions" flat color="primary" @click="closeAlertDialog"
        >关闭</mu-button
      >
    </mu-dialog>
  </div>
</template>

<script>
export default {
  props: ['openAlert', 'jd', 'wd', 'fw'],
  data() {
    return {
      date: null,
      time1: null,
      time2: null,
      data: null
    }
  },
  methods: {
    closeAlertDialog() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped></style>
